import { ColumnProps, RenderScope } from "@/components/ProTable/interface";
import { ElMessage } from "element-plus";
import { getObjectValueByPath, setObjectValueByPath } from "@/utils/obj";
import { FormTypeArray, FormTypeRadio, FormTypeSelect } from "@/constant/enums/form_type";

import { ref, watch } from "vue";

//bool类型的显示样式
const BoolShow = (scope: RenderScope<any>, rowKey: string) => {
  let value = getObjectValueByPath(scope.row, rowKey);
  const handleSwitchChange = () => {
    let value = getObjectValueByPath(scope.row, rowKey);
    setObjectValueByPath(scope.row, rowKey, !value);
    ElMessage({ type: "success", message: "更改已缓存到本地，保存配置后生效" });
  };
  return (
    <el-switch v-model={value} onChange={handleSwitchChange}>
      {value ? "是" : "否"}
    </el-switch>
  );
};

const InputShowDicKey = (scope: RenderScope<any>, rowKey: string) => {
  const val = ref(getObjectValueByPath(scope.row, rowKey));
  watch(
    () => val.value,
    newValue => {
      setObjectValueByPath(scope.row, rowKey, newValue);
    }
  );

  let disabled = true;
  let formType = getObjectValueByPath(scope.row, "edit_config.form_type");
  if (formType == FormTypeSelect || formType == FormTypeRadio) {
    disabled = false;
  }
  let msg = "关联字典key";
  return <el-input disabled={disabled} placeholder={msg} v-model={val.value as any} />;
};

const InputShowlabel = (scope: RenderScope<any>, rowKey: string) => {
  const val = ref(getObjectValueByPath(scope.row, rowKey));
  watch(
    () => val.value,
    newValue => {
      setObjectValueByPath(scope.row, rowKey, newValue);
    }
  );
  let msg = "lbel";
  return <el-input placeholder={msg} v-model={val.value as any} />;
};

// const ChangeFieldBoolValue = (En) => {};
const SelectFormType = (scope: RenderScope<any>, rowKey: string) => {
  const value = ref(getObjectValueByPath(scope.row, rowKey)); // add a ref to track the selected value
  const FormTypeMap = [];
  for (const item of FormTypeArray) {
    FormTypeMap.push({ label: item, value: item });
  }
  const handleValueChange = (newValue: string) => {
    console.log("Selected value:", newValue);
    value.value = newValue;
    setObjectValueByPath(scope.row, rowKey, newValue);
  };
  //console.log(FormTypeMap, " ---FormTypeMap");
  return (
    <el-select v-model={value.value} onChange={handleValueChange} class="m-2" placeholder="Select" size="large">
      {FormTypeMap.map(item => (
        <el-option key={item.value} label={item.label} value={item.value} />
      ))}
    </el-select>
  );
};

export const ColumnsGeneration: ColumnProps[] = [
  { prop: "field_name", label: "字段名", tag: true, align: "left" },
  // { prop: "dto_config.json_name", label: "json标签名" },
  { prop: "field_line_name", label: "下划线名", isShow: false },
  {
    prop: "label", label: "label",
    render: scope => InputShowlabel(scope, "label")
  },

  // { prop: "cols_config.isShow", label: "列表显示", render: scope => BoolShow(scope, "cols_config.isShow") },
  { prop: "dto_config.is_info", label: "信息dto", render: scope => BoolShow(scope, "dto_config.is_info") },
  { prop: "dto_config.is_create", label: "创建dto", render: scope => BoolShow(scope, "dto_config.is_create") },
  { prop: "dto_config.is_update", label: "修改dto", render: scope => BoolShow(scope, "dto_config.is_update") },
  { prop: "edit_config.form_type", label: "表单类型", render: scope => SelectFormType(scope, "edit_config.form_type") },
  {
    prop: "edit_config.dic_key",
    label: "表单关联字典",
    render: scope => InputShowDicKey(scope, "edit_config.dic_key")
  },
  {
    prop: "edit_config.form_required",
    label: "表单必填",
    render: scope => BoolShow(scope, "edit_config.form_required")
  },
  { prop: "cols_config.tag", label: "标签展示", render: scope => BoolShow(scope, "cols_config.tag") }
  // { prop: "dto_config.is_delete", label: "删除dto", render: scope => BoolShowDoubleChange(scope, "dto_config.is_delete") },
  // { prop: "operation", label: "操作", width: 250, fixed: "right" }
];
